<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<script type="text/javascript">
			function clickme(){
				
			}
			
			function hex(x) {
				return ("0" + parseInt(x).toString(16)).slice(-2);
			}
		</script>
		<style type="text/css">
			*{
				padding: 0px;
				margin: 0px;
			}
			.bottom{
				width: 350px;
				background: yellow;
			}
			.button{
				position: relative;
				display: inline-block;
			}
			.box{
				width: 300px;
				height: 400px;
				margin: 100px auto 0px;
				border: 3px solid black ;
				border-top: hidden;
			}
			.bobble{
				width: 20px;
				height: 20px;
				border-radius: 20px;
				border: 3px solid red ;
			}
			.content{
				width: 350px;
				margin: 100px auto;
				border: 1px solid green;
			}
			.button{
				border: 1px solid blue;
			}
			.button>span{
				background: pink;
			}
		</style>
		<title></title>
	</head>
	<body>
		<div class="content">
			<div class="box">
				<div class="bobble"></div>
			</div>
			<div class="bottom">
				<div class="button">
					<!--<span>上</span>
					<span>下</span>
					<span>左</span>
					<span>右</span>-->
					<span onclick="clickme()">点一下</span>
				</div>
			</div>
		</div>
	</body>
</html>
